<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSocket Logger</title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/sockjs-1.1.4.min.js"></script>
<script src="js/stomp-2.3.3.min.js"></script>
</head>
<body>
    <button onclick="openSocket()">开启日志</button>
    <button onclick="closeSocket()">关闭日志</button>
    <div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
        <div></div>
    </div>
</body>
<script>
    var stompClient = null;
    $(document).ready(function() {
        openSocket();
    });
    function openSocket() {
        if (stompClient == null) {
            var socket = new SockJS('/calc/websocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({
                token : "kl"
            }, function(frame) {
                stompClient.subscribe('/topic/pullLogger', function(event) {
                    var content = JSON.parse(event.body);
                    // $("#log-container div").append(content.timestamp + " " + content.level + " --- [" + content.threadName + "] "  + content.loggerName + "   :" + content.formattedMessage).append("<br/>");
                    $("#log-container div").append(content.formattedMessage).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                }, {
                    token : "kltoen"
                });
            });
        }
    }
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient = null;
        }
    }
</script>
</body>
</html>